<template>
  <div class="new-course">
    <div class="new-course-main">
        <div class="new-course-top">
            <div class="title-hot">
                <div class="hot">HOT</div>
                <div class="hot-icon"></div>
            </div>
            <div class="title-text">
                <div class="text">新上好课</div>
            </div>
        </div>
        <ul class="new-course-bottom">
            <li v-for="item in courseList" :key="item.id">
                <img :src="item.courseCover" alt="" :title="item.courseName">
                <div class="course-content">
                    <h3>{{item.courseName}}</h3>
                    <div>{{courseTypeFn(item.courseLevel)}} {{item.clicks}}</div>
                    <div class="price">
                        <div class="price-vip">会员专享</div>
                        <div class="price-txt">￥{{item.discountPrice}}</div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
  </div>
</template>

<script setup>
import {onBeforeMount,ref} from 'vue'
//引入请求函数
import {reqNewCourse} from "@/api/course.js"

//mixin
import courseType from "@/mixins/courseType.js"
let {courseTypeFn} = courseType()
//新上好课数据
let courseList = ref([])
//生命周期
onBeforeMount(()=>{
    reqNewCourse({pageNum:1,pageSize:8}).then(res=>{
        courseList.value = res.data.pageInfo.list
        console.log("新上好课api请求成功",res);
    })
})

</script>

<style scoped>
.new-course-main{
    width:1000px;
    margin: 0 auto;
}
.new-course-top{
    display: flex;
}
.title-hot{
    display: flex;
}
.title-hot .hot{
    width:65px;
    height:25px;
    text-align: center;
    line-height: 25px;
    color:#fff;
    background: linear-gradient(90deg,#ff727f 0%, #fc685c 100%);
    border-radius: 5px 0px 5px 5px;
}
.title-hot .hot-icon{
    width: 0;
    height: 0;
    border:3px solid #fc685c;
    border-bottom-color: transparent;  /*边框颜色透明*/
    border-right-color: transparent;
}
.new-course-top .title-text{
    position: relative;
    margin-left: 5px;
    font-size:23px;
    color:#333333;
}
.new-course-top .title-text:after{
    content: "";
    position: absolute;
    bottom:0;
    left:0;
    z-index: -1;
    width:103px;
    height:9px;
    background: linear-gradient(90deg,#fbf84f 0%,#fea935 100%);
    border-radius: 5px;
}
.new-course-bottom{
    margin-top:20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.new-course-bottom li{
    width:240px;
    height: 275px;
    background: #ffffff;
    box-shadow: 1px 3px 3px rgba(27, 39, 94, 0.1);
    border-radius: 5px;
}
.new-course-bottom li img{
    width: 240px;
    height: 153px;
    cursor: pointer;
}
.new-course-bottom li .course-content{
    padding: 7px 16px;
}
.new-course-bottom li .course-content h3{
    font-size: 12px;
    color:#333333;
    cursor: pointer;
}
.new-course-bottom li .course-content>div{
    font-size: 12px;
    color: #808080;
    margin: 15px 0;
}
.new-course-bottom li .course-content .price{
    display: flex;
}
.new-course-bottom li .course-content .price .price-vip{
    width: 64px;
    height: 16px;
    text-align: center;
    color: #fff;
    background: linear-gradient(90deg,#ff928e 0%,#fe7062 99%);
    border-radius: 16px 0px 16px 0px;
}
.new-course-bottom li .course-content .price .price-txt{
    font-size:12px;
    color:#ff727f;
}
</style>